<script setup>

import {computed, ref} from "vue";
import {$pageUtils} from "@jzl/utils";
import {DFT_ICONS} from "@jzl/icons";

const istyle = defineModel()
/*const props = defineProps({
  name: 'istyle'
})*/

const bbMode = ref("backgroundBlendMode")
const svgWinShow = ref(false)

const svgPreviewValue = computed(() => {
  let type = istyle.value.bgSvgType;
  let width = 180;
  let height = 100;
  let colors = istyle.value.bgSvgColors;

  if (_.startsWith(type, "dcr")) {
    height = 60;
  }

  return $pageUtils.getBgSvg(type, width, height, colors)
})

const handleShowSvgWin = () => {
  svgWinShow.value = true;
}

const handleSelectSvg = (type) => {
  istyle.value.bgSvgType = type;
  svgWinShow.value = false;
}
</script>

<template>
  <div class="ele-prop-item">
    <el-form
      label-width="60px"
      label-position="top"
      size="mini"
      v-if="istyle"
    >
      <el-form-item label="">
        <el-radio-group v-model="istyle.bgType">
          <el-radio-button label="default" v-tippy="{ arrow: true }" content="默认">
            <JIcon :icon="DFT_ICONS.initialize" />
          </el-radio-button>
          <el-radio-button label="color" v-tippy="{ arrow: true }" content="颜色">
            <JIcon :icon="DFT_ICONS.color" />
          </el-radio-button>
          <el-radio-button label="image" v-tippy="{ arrow: true }" content="图片">
            <JIcon :icon="DFT_ICONS.image" />
          </el-radio-button>
          <el-radio-button label="svg" v-tippy="{ arrow: true }" content="SVG">
            <JIcon :icon="DFT_ICONS.svg" />
          </el-radio-button>
          <el-radio-button label="none" v-tippy="{ arrow: true }" content="清空">
            <JIcon :icon="DFT_ICONS.none" />
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
      <template v-if="istyle.bgType === 'color' || istyle.bgType === 'image' || istyle.bgType === 'svg'">
        <el-form-item label="图片" v-if="istyle.bgType === 'image'">
          <file-picker v-model="istyle.backgroundImage"></file-picker>
        </el-form-item>
        <el-form-item label="背景色">
          <color-picker
            v-model="istyle.backgroundColor"
            show-alpha
            size="small"
          />
        </el-form-item>
        <el-form-item label="背景色组" v-tippy="{ arrow: true }" content="颜色组，多数据情况依次显示颜色">
          <ColorListPicker
            v-model="istyle.bgColors"
            :show-alpha="true"
            size="small"
          />
        </el-form-item>
        <el-form-item label="尺寸">
          <el-radio-group v-model="istyle.backgroundSize" size="mini">
            <el-radio-button
              label="auto"
              v-tippy
              content="background-size: auto"
            >自动
            </el-radio-button>
            <el-radio-button
              label="cover"
              v-tippy
              content="background-size: cover"
            >覆盖
            </el-radio-button>
            <el-radio-button
              label="contain"
              v-tippy
              content="background-size: contain"
            >包含
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="位置X">
          <el-radio-group
            v-model="istyle.backgroundPositionX"
            size="mini">
            <el-radio-button
              label="left"
              v-tippy
              content="background-position-x: left"
            >左
            </el-radio-button>
            <el-radio-button
              label="center"
              v-tippy
              content="background-position-x: center"
            >中
            </el-radio-button>
            <el-radio-button
              label="right"
              v-tippy
              content="background-position-x: right"
            >右
            </el-radio-button>
          </el-radio-group>
          <el-input
            v-model="istyle.backgroundPositionX"
            size="mini"
            style="width: 80px;margin-left:10px;"
          />
        </el-form-item>
        <el-form-item label="位置Y">
          <el-radio-group
            v-model="istyle.backgroundPositionY"
            size="mini"
          >
            <el-radio-button
              label="top"
              v-tippy
              content="background-position-y: left"
            >上
            </el-radio-button>
            <el-radio-button
              label="center"
              v-tippy
              content="background-position-y: center"
            >中
            </el-radio-button>
            <el-radio-button
              label="bottom"
              v-tippy
              content="background-position-y: bottom"
            >下
            </el-radio-button>
          </el-radio-group>
          <el-input
            v-model="istyle.backgroundPositionY"
            size="mini"
            style="width: 80px;margin-left:10px;"
          />
        </el-form-item>
        <el-form-item label="重复">
          <el-radio-group v-model="istyle.backgroundRepeat" size="mini">
            <el-radio-button label="inherit" v-tippy="{ arrow: true }" content="继承 inherit">
              <JIcon :icon="DFT_ICONS.inherit"></JIcon>
            </el-radio-button>
            <el-radio-button label="no-repeat" v-tippy="{ arrow: true }" content="不重复 no-repeat">
              <JIcon :icon="DFT_ICONS.none"></JIcon>
            </el-radio-button>
            <el-radio-button label="repeat" v-tippy="{ arrow: true }" content="重复 repeat">
              <JIcon :icon="DFT_ICONS.repeat"></JIcon>
            </el-radio-button>
            <el-radio-button label="repeat-x" v-tippy="{ arrow: true }" content="X轴 repeat-x">
              <JIcon :icon="DFT_ICONS.repeatX"></JIcon>
            </el-radio-button>
            <el-radio-button label="repeat-y" v-tippy="{ arrow: true }" content="Y轴 repeat-y">
              <JIcon :icon="DFT_ICONS.repeatY"></JIcon>
            </el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="istyle.bgType === 'image'" label="背景混合模式">
          <el-radio-group v-model="istyle.backgroundBlendMode" size="small">
            <el-radio label="normal" v-tippy="{ arrow: true }" :content="`${ bbMode }: normal`">默认
            </el-radio>
            <el-radio label="multiply" v-tippy="{ arrow: true }" :content="`${ bbMode }: multiply`">正片叠底
            </el-radio>
            <el-radio label="screen" v-tippy="{ arrow: true }" :content="`${ bbMode }: screen`">滤色
            </el-radio>
            <el-radio label="overlay" v-tippy="{ arrow: true }" :content="`${ bbMode }: overlay`">叠加
            </el-radio>
            <el-radio label="darken" v-tippy="{ arrow: true }" :content="`${ bbMode }: darken`">变暗
            </el-radio>
            <el-radio label="lighten" v-tippy="{ arrow: true }" :content="`${ bbMode }: lighten`">变亮
            </el-radio>
            <el-radio label="color" v-tippy="{ arrow: true }" :content="`${ bbMode }: color`">颜色减淡
            </el-radio>
            <el-radio label="color-dodge" v-tippy="{ arrow: true }" :content="`${ bbMode }: color-dodge`">滤色
            </el-radio>
            <el-radio label="saturation" v-tippy="{ arrow: true }" :content="`${ bbMode }: saturation`">饱和度
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="istyle.bgType === 'svg'" label="SVG">
          <div class="svg-preview" v-if="svgPreviewValue" @click="handleShowSvgWin">
            <img v-if="istyle.bgSvgType" :src="svgPreviewValue"/>
          </div>
          <el-button type="primary" plain @click="handleShowSvgWin">选择SVG</el-button>
        </el-form-item>
        <el-form-item v-if="istyle.bgType === 'svg'" label="SVG色">
          <color-list-picker v-model="istyle.bgSvgColors" :show-alpha="true"
                             :show-pre-define="false"></color-list-picker>
        </el-form-item>
        <!--<el-form-item label="遮罩">
            <el-slider
                    v-model="istyle.mask"
                    input-size="mini"
                    height="20"
                    size="mini"
                    :min="0"
                    :max="1"
                    :step="0.1">
            </el-slider>
        </el-form-item>-->
      </template>
    </el-form>

    <el-dialog title="选择SVG背景" :visible.sync="svgWinShow" width="760px" :fullscreen="false"
               custom-class="m-dialog-fullscreen" :close-on-click-modal="false" :append-to-body="true">
      <div class="svg-bg-win">
        <h5>边框类：</h5>
        <el-row :gutter="10">
          <el-col :span="8">
            <div class="svg-bg-item" @click="handleSelectSvg('bg2')">
              <img :src="$pageUtils.getBgSvg('bg2', 240, 150)"/>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="svg-bg-item" @click="handleSelectSvg('bg3')">
              <img :src="$pageUtils.getBgSvg('bg3', 240, 150)"/>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="svg-bg-item" @click="handleSelectSvg('bg4')">
              <img :src="$pageUtils.getBgSvg('bg4', 240, 150)"/>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="svg-bg-item" @click="handleSelectSvg('bg5')">
              <img :src="$pageUtils.getBgSvg('bg5', 240, 150)"/>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="svg-bg-item" @click="handleSelectSvg('bg7')">
              <img :src="$pageUtils.getBgSvg('bg7', 240, 150)"/>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="svg-bg-item" @click="handleSelectSvg('bg8')">
              <img :src="$pageUtils.getBgSvg('bg8', 240, 150)"/>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="svg-bg-item" @click="handleSelectSvg('bg12')">
              <img :src="$pageUtils.getBgSvg('bg12', 240, 150)"/>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="svg-bg-item" @click="handleSelectSvg('bg13')">
              <img :src="$pageUtils.getBgSvg('bg13', 240, 150)"/>
            </div>
          </el-col>
        </el-row>
        <h5>装饰类：</h5>
        <el-row :gutter="10">
          <el-col :span="6">
            <div class="svg-bg-item svg-dcr" @click="handleSelectSvg('dcr1')">
              <img :src="$pageUtils.getBgSvg('dcr1', 175, 40)"/>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="svg-bg-item svg-dcr" @click="handleSelectSvg('dcr2')">
              <img :src="$pageUtils.getBgSvg('dcr2', 175, 90)"/>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="svg-bg-item svg-dcr" @click="handleSelectSvg('dcr2r')">
              <img :src="$pageUtils.getBgSvg('dcr2r', 175, 90)"/>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="svg-bg-item svg-dcr" @click="handleSelectSvg('dcr3')">
              <img :src="$pageUtils.getBgSvg('dcr3', 175, 90)"/>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="svg-bg-item svg-dcr" @click="handleSelectSvg('dcr4')">
              <img :src="$pageUtils.getBgSvg('dcr4', 175, 90)"/>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="svg-bg-item svg-dcr" @click="handleSelectSvg('dcr4r')">
              <img :src="$pageUtils.getBgSvg('dcr4r', 175, 90)"/>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="svg-bg-item svg-dcr" @click="handleSelectSvg('dcr5')">
              <img :src="$pageUtils.getBgSvg('dcr5', 175, 30)"/>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="svg-bg-item svg-dcr" @click="handleSelectSvg('dcr6')">
              <img :src="$pageUtils.getBgSvg('dcr6', 175, 90)"/>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="svg-bg-item svg-dcr" @click="handleSelectSvg('dcr7')">
              <img :src="$pageUtils.getBgSvg('dcr7', 175, 90)"/>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="svg-bg-item svg-dcr" @click="handleSelectSvg('dcr8')">
              <img :src="$pageUtils.getBgSvg('dcr8', 175, 30)"/>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="svg-bg-item svg-dcr" @click="handleSelectSvg('dcr8r')">
              <img :src="$pageUtils.getBgSvg('dcr8r', 175, 30)"/>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="svg-bg-item svg-dcr" @click="handleSelectSvg('dcr11')">
              <img :src="$pageUtils.getBgSvg('dcr11', 175, 60)"/>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<style lang="scss">
.svg-bg-win {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background-color: #000;
  padding: 10px;

  h5 {
    color: #FFF;
    margin: 0px;
    font-size: 16px;
  }

  .svg-bg-item {
    margin: 10px auto;
  }

  .svg-dcr {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
    border-radius: 5px;
    background: #121212;

    > img {
      max-width: 100%;
    }
  }
}

.svg-preview {
  width: 180px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  border-radius: 3px;
  cursor: pointer;

  > img {
    max-width: 100%;
  }
}
</style>
